<template>
	<div class="login-box">
		<div class="login">
			<h1 style="margin-bottom: 2rem;">焦作师专新闻系统登录</h1>
			<div>
				<el-row style="margin-bottom: 2rem;">
					<el-input size="mini" v-model="user.userName" :prefix-icon="User" placeholder="请输入用户名" />
				</el-row>
				<el-row style="margin-bottom: 2rem;">
					<el-input size="mini" show-password v-model="user.password" :prefix-icon="Lock" placeholder="请输入密码" />
				</el-row>
			</div>
			<div>
				<el-button size="mini" @click="login()">登录</el-button>
				<el-button size="mini" @click="registry()">注册</el-button>
			</div>
		</div>
	</div>
</template>

<script>
	//引入图标
	import {User,Lock} from '@element-plus/icons-vue'
	//引入axios
	import axios from 'axios'
	//配置axios基路径
	axios.defaults.baseURL='/api'
	import {store} from '../../store.js'
	export default{
		data() {
			return {
				user:{
					userName:'',
					password:''
				},
				store
			}
		},
		setup() {
			return {
				User,Lock
			}
		},
		methods:{
			//登录按钮点击事件
			login(){
				//访问后台登录接口
				axios.get('/user/login',{
					params:this.user
				}).then(response => {
					//console.log(response)
					//存储用户信息
					this.store.user = response.data
					//回到首页
					this.$router.push('/')
				})
			},
			registry(){
				this.$router.push('/registry')
			}
		}
	}
</script>

<style>
	.login-box{
		height: 100%;
		background-color: #00374b;
		position: relative;
	}
	.login{
		width: 15%;
		position: absolute;
		top: 20%;
		left: 60%;
		color: white;
		text-align: center;
	}
</style>